<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title id="title">请稍候...</title>
<style>
html,body{
margin:0px;
width: 100%;
height: 100%;
font-family:微软雅黑;
font-size:13px;
}
#alertbg{
position:absolute;
width:100%;
height:100%;
z-index:6;
background-color:rgba(0,0,0,0.5);
}
#endui{
position:absolute;
top:-20px;
z-index:7;
background:#fff;
width:100%;
height:320px;
border-radius:20px;
box-shadow:0px 0px 10px #555;
text-align:center;
}
#startui{
position:absolute;
bottom:0px;
z-index:7;
background:#fff;
width:100%;
height:300px;
border-radius:20px 20px 0px 0px;
box-shadow:0px 0px 10px #555;
text-align:center;
}
.option{
position:absolute;
bottom:0px;
z-index:7;
background:#fff;
width:100%;
height:300px;
border-radius:20px 20px 0px 0px;
text-align:center;
display:none;
}
.mode_button{
display:inline-block;
padding:7px;
margin:7px;
width:70px;
border:2px solid rgb(0,200,195);
background:#fff;
color:rgb(0,200,195);
border-radius:5px;
text-decoration:none;
}
#main{
overflow:hidden;
position:relative;
width:100%;
height:100%;
}
</style>
<style id="end_animation"></style>
<style id="switch_animation"></style>
<style id="alert_style">#endui{display:none}#startui{display:none}</style>
<style id="alertbg_style">#alertbg{display:none}</style>
</head>
<body>
<p id="score" style="position:absolute;width:100%;text-align:center;font-size:30px;z-index:5;color:rgb(0,200,195);text-shadow:1px 1px 2px #fff,-1px -1px 2px #fff">请稍候...</p>
<div id="alertbg"></div>
<!--主体-->
<div id="main" class="main">
<div id="masker" style="position:absolute;width:100%;height:100%;z-index:4"></div>
<table id="part1_table" style="width:100%;height:350px;position:absolute;z-index:2">
<tr>
<td id="part1_1_1" class="part1"></td>
<td id="part1_1_2" class="part1"></td>
<td id="part1_1_3" class="part1"></td>
<td id="part1_1_4" class="part1"></td>
<td id="part1_1_5" class="part1"></td>
</tr>
<tr>
<td id="part1_2_1" class="part1"></td>
<td id="part1_2_2" class="part1"></td>
<td id="part1_2_3" class="part1"></td>
<td id="part1_2_4" class="part1"></td>
<td id="part1_2_5" class="part1"></td>
</tr>
<tr>
<td id="part1_3_1" class="part1"></td>
<td id="part1_3_2" class="part1"></td>
<td id="part1_3_3" class="part1"></td>
<td id="part1_3_4" class="part1"></td>
<td id="part1_3_5" class="part1"></td>
</tr>
<tr>
<td id="part1_4_1" class="part1"></td>
<td id="part1_4_2" class="part1"></td>
<td id="part1_4_3" class="part1"></td>
<td id="part1_4_4" class="part1"></td>
<td id="part1_4_5" class="part1"></td>
</tr>
<tr>
<td id="part1_5_1" class="part1"></td>
<td id="part1_5_2" class="part1"></td>
<td id="part1_5_3" class="part1"></td>
<td id="part1_5_4" class="part1"></td>
<td id="part1_5_5" class="part1"></td>
</tr>
</table>
<table id="part2_table" style="width:100%;height:350px;position:absolute;z-index:2">
<tr>
<td id="part2_1_1" class="part2"></td>
<td id="part2_1_2" class="part2"></td>
<td id="part2_1_3" class="part2"></td>
<td id="part2_1_4" class="part2"></td>
<td id="part2_1_5" class="part2"></td>
</tr>
<tr>
<td id="part2_2_1" class="part2"></td>
<td id="part2_2_2" class="part2"></td>
<td id="part2_2_3" class="part2"></td>
<td id="part2_2_4" class="part2"></td>
<td id="part2_2_5" class="part2"></td>
</tr>
<tr>
<td id="part2_3_1" class="part2"></td>
<td id="part2_3_2" class="part2"></td>
<td id="part2_3_3" class="part2"></td>
<td id="part2_3_4" class="part2"></td>
<td id="part2_3_5" class="part2"></td>
</tr>
<tr>
<td id="part2_4_1" class="part2"></td>
<td id="part2_4_2" class="part2"></td>
<td id="part2_4_3" class="part2"></td>
<td id="part2_4_4" class="part2"></td>
<td id="part2_4_5" class="part2"></td>
</tr>
<tr>
<td id="part2_5_1" class="part2"></td>
<td id="part2_5_2" class="part2"></td>
<td id="part2_5_3" class="part2"></td>
<td id="part2_5_4" class="part2"></td>
<td id="part2_5_5" class="part2"></td>
</tr>
</table>
</div>
<!--起始页-->
<div id="startui">
<div style="height:10px;width:100%"></div>
<p style="margin:5px">游戏模式</p>
<div>
<div id="select_random" class="mode_button" onclick="select_random()">随机</div><div id="select_stair" class="mode_button" onclick="select_stair()">楼梯</div><div id="select_continuous" class="mode_button" onclick="select_continuous()">全纵连</div>
</div>
<div id="stair_option" style="display:none">
<div id="stair_l2r" class="mode_button" style="width:121px" onclick="stair_l2r();reset()">左→右</div><div id="stair_r2l" class="mode_button" style="width:121px" onclick="stair_r2l();reset()">右←左</div>
</div>
<div id="continuous_option" style="display:none">
<div style='display:inline-block'>第</div><input id='user_continuous_input' type='text' class='mode_button' style='width:70px;text-align:center' oninput="this.value = this.value.replace(/[^0-9]/g, '');list_name = this.value;reset()"/><div style='display:inline-block'>列</div>
</div>
<p style="margin:5px">选项</p>
<div>
<div id="chance_option_button" class="mode_button" onclick="document.getElementById('chance_option').style.display = 'inline'">机会</div><div id="theme_option_button" class="mode_button" onclick="document.getElementById('theme_option').style.display = 'inline'">个性化</div><div id="timeout_option_button" class="mode_button" onclick="document.getElementById('timeout_option').style.display = 'inline'">倒计时</div>
</div>
<div class="mode_button" style="background:rgb(0,200,195);color:#fff;width:274px" onclick="start()">开始</div>
<p style="margin:5px;font-size:10px">判定位置：页面最底部</p>
<p style="margin:5px;font-size:10px">本项目基于重制的 <a href="https://github.com/BUGTeas/EatKanoRemade" style="color:rgb(0,200,195)">BUGTeas/EatKanoRemade</a>，与 <a href="https://github.com/arcxingye/EatKano" style="color:rgb(0,200,195)">arcxingye/EatKano</a> 无关！</p>
</div>
<!--倒计时选项-->
<div id="timeout_option" class="option">
<p>倒计时</p>
<div>
<div id="disable_timeout" class="mode_button" style="width:121px" onclick="disable_timeout()">禁用</div><div id="enable_timeout" class="mode_button" style="width:121px" onclick="enable_timeout()">启用</div>
</div>
<div id="user_timeout_option" style="display:none">
<input id='user_timeout_input' type='text' class='mode_button' style='width:128px' onclick="inputtimeout = this.value;get_this = this" oninput="this.value = this.value.replace(/[^0-9]/g, '');user_timeout = this.value;reset()"/><div style='display:inline-block'>秒</div>
</div>
<div>
<div class="mode_button" style='background:rgb(0,200,195);color:#fff;width:274px' onclick="document.getElementById('timeout_option').style.display = 'none'">确认</div>
</div>
</div>
<!--机会选项-->
<div id="chance_option" class="option">
<p>机会</p>
<div>
<div id="disable_chance" class="mode_button" onclick="disable_chance()">禁用</div><div id="enable_chance" class="mode_button" onclick="enable_chance()">启用</div><div id="enable_chance_infinite" class="mode_button" onclick="enable_chance_infinite()">无限</div>
</div>
<div id="user_chance_option" style="display:none">
<input id='user_chance_input' type='text' class='mode_button' style='width:128px' onclick="inputchance = this.value;get_this = this" oninput="this.value = this.value.replace(/[^0-9]/g, '');user_chance = this.value;reset()"/><div style='display:inline-block'>次</div>
</div>
<div>
<div class="mode_button" style='background:rgb(0,200,195);color:#fff;width:274px' onclick="document.getElementById('chance_option').style.display = 'none'">确认</div>
</div>
</div>
<!--个性化选项-->
<div id="theme_option" class="option">
<p>个性化</p>
<div>
<div style='display:inline-block'>页面标题</div><input id='user_title_input' type='text' class='mode_button' style='width:200px' oninput="document.getElementById('title').innerHTML = this.value;"/>
</div>
<div>
<div class="mode_button" onclick="document.getElementById('background_option').style.display = 'inline'" style='background:rgb(0,200,195);color:#fff'>背景</div><div class="mode_button" onclick="document.getElementById('click_style_option').style.display = 'inline'" style='background:rgb(0,200,195);color:#fff'>按键</div><div id="sound_option_button" class="mode_button" onclick="document.getElementById('sound_option').style.display = 'inline'">声音</div>
</div>
<div>
<div class="mode_button" style='background:rgb(0,200,195);color:#fff;width:274px' onclick="document.getElementById('theme_option').style.display = 'none'">确认</div>
</div>
</div>
<!--个性化-背景选项-->
<div id="background_option" class="option">
<p>背景</p>
<div>
<div id="to_part1_background_option" class="mode_button" style="width:121px" onclick="to_part1_theme_option()">区域一</div><div id="to_part2_background_option" class="mode_button" style="width:121px" onclick="to_part2_theme_option()">区域二</div>
</div>
<p style="margin:0px;font-size:10px">输入颜色的对应代码，如“#114514”、“rgb(0,200,20)”、“red”</p>
<div>
<div style='display:inline-block'>背景颜色</div><input id='background_input' type='text' class='mode_button' style='width:200px' oninput="if(theme_part_name=='part1'){part1_background = this.value;reset();}if(theme_part_name=='part2'){part2_background = this.value;reset();}"/>
</div>
<div>
<div style='display:inline-block'>边框颜色</div><input id='border_input' type='text' class='mode_button' style='width:200px' oninput="if(theme_part_name=='part1'){part1_border = this.value;reset();}if(theme_part_name=='part2'){part2_border = this.value;reset();}"/>
</div>
<div>
<div class="mode_button" style='background:rgb(0,200,195);color:#fff;width:274px' onclick="document.getElementById('background_option').style.display = 'none'">确认</div>
</div>
</div>
<!--个性化-按键样式选项-->
<div id="click_style_option" class="option" style="height:400px;bottom:-100px">
<p>按键样式</p>
<div>
<div id="to_part1_click_style_option" class="mode_button" style="width:121px" onclick="to_part1_theme_option()">区域一</div><div id="to_part2_click_style_option" class="mode_button" style="width:121px" onclick="to_part2_theme_option()">区域二</div>
</div>
<p style="margin:0px;font-size:10px">输入颜色的对应代码，如“#114514”、“rgb(0,200,20)”、“red”</p>
<div>
<div style='display:inline-block'>背景颜色</div><input id='click_background_input' type='text' class='mode_button' style='width:200px' oninput="if(theme_part_name=='part1'){part1_click_background = this.value;part1_reset()}if(theme_part_name=='part2'){part2_click_background = this.value;part2_reset()}"/>
</div>
<p style="margin:5px">按键内容(点击前)</p>
<div>
<div class="mode_button" id="click_inner_before_default" onclick="click_inner_before_default()">默认图片</div><div class="mode_button" id="click_inner_before_image" onclick="click_inner_before_image()">自定义图片</div><div class="mode_button" id="click_inner_before_html" onclick="click_inner_before_html()">HTML 代码</div>
</div>
<div id="click_inner_before_default_option" style="display:none">
<div id="click_inner_before_default_1" class="mode_button" style="width:121px" onclick="click_inner_before_default_1()">图片一</div><div id="click_inner_before_default_2" class="mode_button" style="width:121px" onclick="click_inner_before_default_2()">图片二</div>
</div>
<div id="click_inner_before_image_option"></div>
<div id="click_inner_before_html_option" style="display:none">
<div style='display:inline-block'>HTML 代码</div><input id='click_inner_before_html_input' type='text' class='mode_button' style='width:200px' oninput="if(theme_part_name=='part1'){part1_click_inner = this.value;part1_reset()}if(theme_part_name=='part2'){part2_click_inner = this.value;part2_reset()}"/>
</div>
<p style="margin:5px">按键内容(点击后)</p>
<div>
<div class="mode_button" id="click_inner_after_default" onclick="click_inner_after_default()">默认图片</div><div class="mode_button" id="click_inner_after_image" onclick="click_inner_after_image()">自定义图片</div><div class="mode_button" id="click_inner_after_html" onclick="click_inner_after_html()">HTML 代码</div>
</div>
<div id="click_inner_after_image_option"></div>
<div id="click_inner_after_html_option" style="display:none">
<div style='display:inline-block'>HTML 代码</div><input id='click_inner_after_html_input' type='text' class='mode_button' style='width:200px' oninput="if(theme_part_name=='part1'){part1_after_click_inner = this.value;part1_reset()}if(theme_part_name=='part2'){part2_after_click_inner = this.value;part2_reset()}"/>
</div>
<div>
<div class="mode_button" style='background:rgb(0,200,195);color:#fff;width:274px' onclick="document.getElementById('click_style_option').style.display = 'none'">确认</div>
</div>
</div>
<!--个性化-声音选项-->
<div id="sound_option" class="option" style="height:310px;bottom:-10px">
<p>声音</p>
<div>
<div id="disable_sound" class="mode_button" style="width:121px" onclick="disable_sound()">禁用</div><div id="enable_sound" class="mode_button" style="width:121px" onclick="enable_sound()">启用</div>
</div>
<div id="sound_option_main" style="display:none">
<p style="margin:5px">时间结束音效</p>
<div>
<div id="timeover_sound_disable" class="mode_button" onclick="timeover_sound_disable()">无</div><div id="timeover_sound_default" class="mode_button" onclick="timeover_sound_default();play_timeover_sound()">默认</div><div id="timeover_sound_custom" class="mode_button" onclick="timeover_sound_custom()">自定义文件</div>
</div>
<div id="timeover_sound_custom_option"></div>
<p style="margin:5px">点击错误音效</p>
<div>
<div id="error_sound_disable" class="mode_button" onclick="error_sound_disable()">无</div><div id="error_sound_default" class="mode_button" onclick="error_sound_default();play_error_sound()">默认</div><div id="error_sound_custom" class="mode_button" onclick="error_sound_custom()">自定义文件</div>
</div>
<div id="error_sound_custom_option"></div>
<p style="margin:5px">点击错误音效(有机会)</p>
<div>
<div id="error_chance_sound_disable" class="mode_button" onclick="error_chance_sound_disable()">无</div><div id="error_chance_sound_default" class="mode_button" onclick="error_chance_sound_default();play_error_chance_sound()">默认</div><div id="error_chance_sound_custom" class="mode_button" onclick="error_chance_sound_custom()">自定义文件</div>
</div>
<div id="error_chance_sound_custom_option"></div>
<p style="margin:5px">按键点击音效</p>
<div>
<div id="to_part1_sound_option" class="mode_button" style="width:121px" onclick="to_part1_theme_option()">区域一</div><div id="to_part2_sound_option" class="mode_button" style="width:121px" onclick="to_part2_theme_option()">区域二</div>
</div>
<div>
<div id="click_sound_disable" class="mode_button" onclick="click_sound_disable()">无</div><div id="click_sound_default" class="mode_button" onclick="click_sound_default()">默认</div><div id="click_sound_custom" class="mode_button" onclick="click_sound_custom()">自定义文件</div>
</div>
<div id="click_sound_default_option" style="display:none">
<div id="click_sound_default_1" class="mode_button" style="width:121px" onclick="click_sound_default_1();audio = document.createElement('audio');audio.src = 'Resources/click_sound_default_1.mp3';audio.play();">声音一</div><div id="click_sound_default_2" class="mode_button" style="width:121px" onclick="click_sound_default_2();audio = document.createElement('audio');audio.src = 'Resources/click_sound_default_2.mp3';audio.play();">声音二</div>
</div>
<div id="click_sound_custom_option"></div>
</div>
<div class="mode_button" style='background:rgb(0,200,195);color:#fff;width:274px' onclick="document.getElementById('sound_option').style.display = 'none'">确认</div>
</div>
<!--游戏结束页-->
<div id="endui">
<div style="height:20px;width:100%"></div>
<h3 id="endui_said"></h3>
<p id="endui_timeout"></p>
<div>
<div class="mode_button" style="width:121px" onclick="restart()">重新开始</div><div class="mode_button" style="background:rgb(0,200,195);color:#fff;width:121px" onclick="tostartui()">返回起始页</div>
</div>
<!--在此处修改你的开源地址、视频链接，记得要保留原作者的链接-->
<div>
</div>
</div>
<script type="text/javascript">
//所有变量都不能删除
//默认标题
user_title = "吃掉小鹿乃（重制版）";
//默认边框颜色
part1_border = "#eee";
part2_border = "#eee";
//默认背景颜色
part1_background = "#fff";
part2_background = "#fff";
//默认按键背景颜色
part1_click_background = "#fff";
part2_click_background = "#fff";
//设置点击前按键内容(default/html)
part1_before_click_inner_mode = "default";
part2_before_click_inner_mode = "default";
//点击前默认图片选择(1/2)
part1_click_inner_before_default ="1";
part2_click_inner_before_default ="2";
//点击前默认HTML代码(不能有双引号)
part1_click_inner = "<p>Hello</p><p>World</p>";
part2_click_inner = "<p>Hello</p><p>World</p>"
//设置点击后按键内容(default/html)
part1_after_click_inner_mode = "default";
part2_after_click_inner_mode = "default";
//点击后默认HTML代码(不能有双引号)
part1_after_click_inner = "<p>Click</p><p>World</p>";
part2_after_click_inner = "<p>Click</p><p>World</p>";
//声音(disabled/enabled)
sound_mode = "enabled";
//倒计时结束声音(disabled/default)
timeover_sound_mode = "default";
//点击错误声音(disabled/default)
error_sound_mode = "default";
//有机会点击错误声音(disabled/default)
error_chance_sound_mode = "default";
//点击后声音(disabled/default)
part1_click_sound_mode = "default";
part2_click_sound_mode = "default";
//点击后默认声音选择(1/2)
part1_click_sound_default = "1";
part2_click_sound_default = "1";
//默认游戏模式(random/stair/continuous)
set_mode = "random";
//楼梯模式默认方向(r2l/l2r)
stair_mode = "l2r";
//全纵连模式默认位置(单位:列)
continuous_list = 3;
//倒计时(disabled/enabled)
timeout_mode = "enabled";
//倒计时时长(单位:秒)
user_timeout = "20";
//机会(disabled/enabled)
chance_mode = "disabled";
//机会次数(单位:次)
user_chance = "5";
</script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>